<template>
  <el-table :border="border" :data="tableData" style="width: 100%">
    <el-table-column
      v-for="(item,index) in columns"
      :key="index"
      :label="item.label"
      :prop="item.prop">
      <template #default="scope">
        <div v-for="(itm,idx) in scope.row.list" :key="idx">
          <template v-if="itm.week === item.prop">
            <table-pane
              :col_idx="idx"
              :row_data="itm"
              :row_idx="scope.row.index"
              @to-down="handleDataDown"
              @to-right="handleDataRight"
            ></table-pane>
          </template>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import TablePane from '@/components/calendarPane/TablePane.vue'

export default {
  name: 'CalendarPane',
  props: ['dataList'],
  components: {
    TablePane
  },
  data () {
    return {
      border: true,
      columns: [
        { prop: '7', label: '周日' },
        { prop: '1', label: '周一' },
        { prop: '2', label: '周二' },
        { prop: '3', label: '周三' },
        { prop: '4', label: '周四' },
        { prop: '5', label: '周五' },
        { prop: '6', label: '周六' }
      ],
      tableData: []
    }
  },
  mounted () {
    this.tableData = this.dataList
  },
  methods: {
    handleDataDown (index) {
      if (this.tableData.length) {
        const week = this.tableData[index.row_idx].list[index.col_idx].week
        const contentList = this.tableData[index.row_idx].list[index.col_idx].contentList
        this.tableData.forEach(item => {
          if (item.index > index.row_idx) {
            for (let i = index.col_idx; i <= item.list.length; i++) {
              if (week === item.list[i].week) {
                item.list[i].contentList = contentList
              }
            }
          }
        })
        this.$emit('to-down', this.tableData)
      }
    },
    handleDataRight (index) {
      if (this.tableData.length) {
        const contentList = this.tableData[index.row_idx].list[index.col_idx].contentList
        for (let i = index.col_idx + 1; i < this.tableData[index.row_idx].list.length; i++) {
          this.tableData[index.row_idx].list[i].contentList = contentList
        }
        this.$emit('to-right', this.tableData)
      }
    }
  }
}
</script>

<style scoped>

</style>
